/**
 * 标题栏的各种组件
 * Created by 10691 on 17/5/10.
 */
import React, {Component, PropTypes} from 'react';
import {Text, TouchableOpacity, Image} from 'react-native';

/**
 * 标题栏左侧的近半小时热门点击跳转图标组件
 */
export class HeaderLeftHot extends Component {

    // 设置属性内容以及是否是必须选项
    static propTypes = {
        onPress: PropTypes.func,
    };

    render() {
        return (
            <TouchableOpacity
                style={{padding: 15}}
                onPress={this.props.onPress}>
                <Image source={{uri: 'hot_icon_20x20'}}
                       style={{width: 20, height: 20, tintColor: 'gray'}}/>
            </TouchableOpacity>)
    }


}

/**
 * 标题栏通用标题组件
 */
export class HeaderTitle extends Component {

    // 设置属性内容以及是否是必须选项
    static propTypes = {
        title: PropTypes.string.isRequired,
        /**
         * 是否显示标题图标右侧的三角形图片
         */
        isShowAngle: PropTypes.boolean,
        titleStyle: PropTypes.style,
        onPress: PropTypes.func,
    };

    // 属性的默认值
    static defaultProps = {
        title: '',
        isShowAngle: false,
    };

    render() {
        return (
            <TouchableOpacity
                style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', alignSelf: 'center'}}
                onPress={this.props.onPress}>
                <Text style={[this.props.titleStyle, {
                    fontSize: 18,
                    color: 'gray',
                    fontWeight: 'bold'
                }]}>{this.props.title}</Text>
                <Image source={{uri: 'nav_title_down_20x20'}}
                       style={{width: 20, height: 20, display: this.props.isShowAngle === true ? 'flex' : 'none'}}/>
            </TouchableOpacity>
        )
    }

}

/**
 * 标题栏右侧的搜索图标组件
 */
export class HeaderRightSearch extends Component {
    // 设置属性内容以及是否是必须选项
    static propTypes = {
        onPress: PropTypes.func,
    };

    render() {
        return (
            <TouchableOpacity
                style={{padding: 15}}
                onPress={this.props.onPress}>
                <Image source={{uri: 'search_icon_20x20'}}
                       style={{width: 20, height: 20, tintColor: 'gray'}}/>
            </TouchableOpacity>
        )


    }
}

/**
 * 标题栏右侧的文本按键组件
 */
export class HeaderRightText extends Component {

    static propTypes = {
        title: PropTypes.string.isRequired,
        onPress: PropTypes.func,
    };

    render() {
        return (
            <TouchableOpacity
                style={{padding: 15}}
                onPress={this.props.onPress}>
                <Text style={{color: '#1b8949', fontSize: 15}}>{this.props.title}</Text>
            </TouchableOpacity>)
    }
}